<template>
  <lay-layout>
    <lay-side>
      <lay-scroll style="overflow-y: scroll">
        <ul class="layui-menu layui-menu-lg layui-menu-docs">
          <li
            v-for="menu in menus"
            :key="menu"
            class="layui-menu-item-group"
            lay-options="{type: 'group', isAllowSpread: true}"
          >
            <div class="layui-menu-body-title">{{ menu.title }}</div>
            <hr />
            <ul>
              <li
                v-for="children in menu.children"
                :key="children"
                :class="[
                  currentPath === children.path
                    ? 'layui-menu-item-checked2'
                    : '',
                ]"
                @click="handleClick(children)"
              >
                <div class="layui-menu-body-title">
                  <router-link :to="children.path">
                    <span>{{ children.title }}</span>
                    <span class="layui-font-12 layui-font-gray">
                      {{ children.subTitle }}
                    </span>
                  </router-link>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </lay-scroll>
    </lay-side>
    <lay-body>
      <div
        style="
          padding: 20px;
          margin-right: 180px;
          transition: margin 240ms 60ms;
        "
      >
        <router-view />
      </div>
    </lay-body>
  </lay-layout>
</template>
<script>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const currentPath = ref("/zh-CN/guide");

    watch(
      () => route.path,
      (val) => {
        currentPath.value = val;
      },
      {
        immediate: true,
        deep: true,
      }
    );

    const menus = [
      {
        id: 1,
        title: "通用",
        children: [
          {
            id: 20,
            title: "颜色",
            subTitle: "color",
            path: "/zh-CN/components/color",
          },
          {
            id: 6,
            title: "按钮",
            subTitle: "button",
            path: "/zh-CN/components/button",
          },
          {
            id: 7,
            title: "图标",
            subTitle: "iconfont",
            path: "/zh-CN/components/icon",
          },
          {
            id: 10,
            title: "动画",
            subTitle: "animation",
            path: "/zh-CN/components/animation",
          },
        ],
      },
      {
        id: 1,
        title: "布局",
        children: [
          {
            id: 4,
            title: "布局",
            subTitle: "layout",
            path: "/zh-CN/components/layout",
          },
          {
            id: 5,
            title: "容器",
            subTitle: "container",
            path: "/zh-CN/components/container",
          },
          {
            id: 11,
            title: "栅格",
            subTitle: "grid",
            path: "/zh-CN/components/grid",
          },
          {
            id: 8,
            title: "面板",
            subTitle: "panel",
            path: "/zh-CN/components/panel",
          },
          {
            id: 9,
            title: "卡片",
            subTitle: "card",
            path: "/zh-CN/components/card",
          },
          {
            id: 10,
            title: "骨架",
            subTitle: "skeleton",
            path: "/zh-CN/components/skeleton",
          },
        ],
      },
      {
        id: 1,
        title: "导航",
        children: [
          {
            id: 16,
            title: "菜单",
            subTitle: "nav",
            path: "/zh-CN/components/menu",
          },
          {
            id: 17,
            title: "面包屑",
            subTitle: "breadcrumb",
            path: "/zh-CN/components/breadcrumb",
          },
          {
            id: 28,
            title: "选项卡",
            subTitle: "tab",
            path: "/zh-CN/components/tab",
          },
          {
            id: 27,
            title: "下拉菜单",
            subTitle: "dropdown",
            path: "/zh-CN/components/dropdown",
          },
          {
            id: 42,
            title: "返回顶部",
            subTitle: "backtop",
            path: "/zh-CN/components/backtop",
          },
        ],
      },
      {
        id: 1,
        title: "表单",
        children: [
          {
            id: 36,
            title: "开关",
            subTitle: "switch",
            path: "/zh-CN/components/switch",
          },
          {
            id: 32,
            title: "复选框",
            subTitle: "checkbox",
            path: "/zh-CN/components/checkbox",
          },
          {
            id: 33,
            title: "单选框",
            subTitle: "radio",
            path: "/zh-CN/components/radio",
          },
          {
            id: 34,
            title: "输入框",
            subTitle: "input",
            path: "/zh-CN/components/input",
          },
          {
            id: 341,
            title: "数字输入框",
            subTitle: "inputNumber",
            path: "/zh-CN/components/inputNumber",
          },
          {
            id: 35,
            title: "文本域",
            subTitle: "textarea",
            path: "/zh-CN/components/textarea",
          },
          {
            id: 39,
            title: "下拉选择",
            subTitle: "select",
            path: "/zh-CN/components/select",
          },
          {
            id: 40,
            title: "颜色选择器",
            subTitle: "colorPicker",
            path: "/zh-CN/components/colorPicker",
          },
          {
            id: 29,
            title: "图标选择器",
            subTitle: "iconPicker",
            path: "/zh-CN/components/iconPicker",
          },
          {
            id: 26,
            title: "评分",
            subTitle: "rate",
            path: "/zh-CN/components/rate",
          },
          {
            id: 37,
            title: "滑块",
            subTitle: "slider",
            path: "/zh-CN/components/slider",
          },
          {
            id: 12,
            title: "表单",
            subTitle: "form",
            path: "/zh-CN/components/form",
          },
        ],
      },
      {
        id: 1,
        title: "展示",
        children: [
          {
            id: 18,
            title: "进度",
            subTitle: "progress",
            path: "/zh-CN/components/progress",
          },
          {
            id: 19,
            title: "时间线",
            subTitle: "timeline",
            path: "/zh-CN/components/timeline",
          },
          {
            id: 21,
            title: "折叠面板",
            subTitle: "collapse",
            path: "/zh-CN/components/collapse",
          },
          {
            id: 22,
            title: "表格",
            subTitle: "table",
            path: "/zh-CN/components/table",
          },
          {
            id: 23,
            title: "头像",
            subTitle: "avatar",
            path: "/zh-CN/components/avatar",
          },
          {
            id: 25,
            title: "空",
            subTitle: "empty",
            path: "/zh-CN/components/empty",
          },
          {
            id: 29,
            title: "分页",
            subTitle: "page",
            path: "/zh-CN/components/page",
          },
          {
            id: 30,
            title: "树形组件",
            subTitle: "tree",
            path: "/zh-CN/components/tree",
          },
          {
            id: 31,
            title: "穿梭框",
            subTitle: "transfer",
            path: "/zh-CN/components/transfer",
          },
          {
            id: 38,
            title: "轮播",
            subTitle: "carousel",
            path: "/zh-CN/components/carousel",
          },
          {
            id: 43,
            title: "数字滚动",
            subTitle: "countUp",
            path: "/zh-CN/components/countup",
          },
        ],
      },
      {
        id: 1,
        title: "辅助",
        children: [
          {
            id: 13,
            title: "徽章",
            subTitle: "badge",
            path: "/zh-CN/components/badge",
          },
          {
            id: 14,
            title: "区块",
            subTitle: "block",
            path: "/zh-CN/components/block",
          },
          {
            id: 15,
            title: "分割",
            subTitle: "line",
            path: "/zh-CN/components/line",
          },
          {
            id: 24,
            title: "字段",
            subTitle: "field",
            path: "/zh-CN/components/field",
          },
          {
            id: 25,
            title: "文字提示",
            subTitle: "tooltip",
            path: "/zh-CN/components/tooltip",
          },
          {
            id: 99,
            title: "分步",
            subTitle: "step",
            path: "/zh-CN/components/step",
          },
        ],
      },
      {
        id: 1,
        title: "反馈",
        children: [
          {
            id: 90,
            title: "弹层",
            subTitle: "modal",
            path: "/zh-CN/components/modal",
          },
          {
            id: 91,
            title: "加载",
            subTitle: "modal",
            path: "/zh-CN/components/load",
          },
          {
            id: 92,
            title: "询问",
            subTitle: "confirm",
            path: "/zh-CN/components/confirm",
          },
          {
            id: 93,
            title: "消息",
            subTitle: "msg",
            path: "/zh-CN/components/msg",
          },
        ],
      },
    ];

    const selected = ref(1);

    const handleClick = function (menu) {
      selected.value = menu.id;
      router.push(menu.path);
    };

    return {
      menus,
      selected,
      currentPath,
      handleClick,
    };
  },
};
</script>
